<template>
  <h3>readonly, shallowReadonly, isReadonly 函数的演示</h3>

  <hr>
  <div>个人信息 (<b>readonly</b> 对象演示):</div>
  <div class="single">姓名: {{person.name}}</div>
  <div class="single">年龄: {{person.age}}</div>
  <div class="single">薪水: {{person.job.job1.salary}}K</div>
  <div>所有信息: {{person}}</div>

  <button @click="person.name += '~'">修改姓名</button>
  <button @click="person.age++">修改年龄</button>
  <button @click="person.job.job1.salary++">涨薪</button>

  <hr>
  <div style="margin-bottom: 8px;"><b>readonly</b> 基本数据类型演示</div>
  <button @click="count++">计数加一</button>
  <div>当前计数 ( 基本数据类型 ): {{count}}</div>
  
  <hr>
  <div style="margin-bottom: 8px;"><b>shallowReadonly</b> 演示</div>
  <button @click="book.name += '@'">修改书名</button>
  <button @click="book.price++">书本价格加一</button>
  <button @click="book.category.sect += '**'">修改流派</button>
  <div>书本全部信息: {{book}}</div>
  <hr>
  <p>
    注意:<br>
    1. readonly: 接受一个对象 (响应式或纯对象) 或 ref 并返回原始对象的只读代理。只读代理是深层的：任何被访问的嵌套 property 也是只读的。<br>
    2. shallowReadonly 处理对象 (响应式或纯对象)为浅层次的只读,即只有顶层属性只读,深层属性不爱限制.<br>
    3. 应用场景: 不希望数据被修改时用,可以用于只读权限控制?<br>
    4. 详情可参考官方文档:
      <a href="https://v3.cn.vuejs.org/api/basic-reactivity.html#readonly">readonly</a>&nbsp;,&nbsp;
      <a href="https://v3.cn.vuejs.org/api/basic-reactivity.html#shallowreadonly">shallowReadonly</a>
  </p>
</template>

<script>
import { reactive, ref, readonly, shallowReadonly, isReadonly } from 'vue'

export default {
  setup() {
    let person = readonly(reactive({
      name: '张三',
      age: 33,
      job: {
        job1: {
          salary: 22
        }
      },
    }))

    let count = ref(0)

    count = readonly(count)

    let book = ref({
      name: 'World war II',
      price: 99,
      category:{
        sect: 'Unknow'
      }
    })

    book = shallowReadonly(book.value)

    console.log('person is readonly? ', isReadonly(person), person)
    console.log('count is readonly? ', isReadonly(count), count)
    console.log('count.value is readonly? ', isReadonly(count.value), count.value)
    console.log('book is readonly? ', isReadonly(book), book)
    console.log('book.value is readonly? ', isReadonly(book.value), book.value)

    //expose 
    return {
      person,
      count,
      book
    }
  },
}
</script>

<style scoped>

h3 {
  text-align: center;
}

button {
  margin-left: 5px;
}

.single {
  margin-top: 5px;
}

</style>